<template>
	<view class="">
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" >
					<view class="flex justify-between align-center" style="width: 100%;">
						<view class="action" @click="closePage">
							<text class="cuIcon-back "></text>
						</view>
						<view class="content text-bold">
							小程序登录
						</view>
						<view class="action">
						</view>
					</view>
				</view>
			</template>
		</headerSlot>
		<view class="container">
			<view class="wx-auth-container">
				<view class="box">
					<view class="logo-info">
						<text class="title">欢迎进入{{ projectName }}</text>
					</view>
					<view class="small-tips">
						<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
						<view>您的公开信息（昵称、头像）</view>
					</view>


					<view class="btns">
						<button v-if="enablePrivacy" class="btn-auth" type="primary" open-type="getPhoneNumber"
							@getphonenumber="handlePhone">
							授权手机号码
						</button>
						<button v-else type="primary" bindtap="beforeLogin" @click="beforeLogin()"
							class="btn-auth">授权手机号码</button>
						<view @click="closePage" class="btn-callback">暂不登录</view>
					</view>

					<view class="row privacy flex justify-start align-start">
						<view>

							<radio @click="RadioChange" :class="enablePrivacy?'checked':''" :checked="enablePrivacy"
								value="A" style=" transform: scale(0.7);">
								<!-- <radio :class="enablePrivacy?'checked':''" :checked="enablePrivacy?true:false" value="A"
								@click="enablePrivacy = !enablePrivacy"> -->
							</radio>
						</view>
						<view class="tips">
							未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span
								@click="toPage('/pages/mePages/about/privacy')">《隐私协议》</span>
							<span @click="toPage('/pages/mePages/about/agreement')">
								《服务协议》
							</span>
							<span @click="toPage('/pages/mePages/about/userAgreement')">
								《用户协议》
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import {
		mpAutoLogin
	} from "@/api/connect.js";

	import {
		whetherNavigate
	} from "@/utils/Foundation"; //登录跳转
	import {
		getUserInfo
	} from "@/api/members";
	import jwt from '@/js_sdk/t-jwt/jwt.js'
	import storage from "@/utils/storage.js";
	import config from '@/config/config'
	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				// 授权信息展示，商城名称
				projectName: '惠邻生活',
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "",
				//微信头像
				image: "",
				enablePrivacy: false, //隐私政策
			};
		},
		onLoad() {
			let that = this
			uni.login({
				provider: 'weixin', // 使用微信登录
				success: (res) => {
					console.log(res);
					that.code = res.code;
				},
			});
		},
		methods: {
			RadioChange(e) {
				this.enablePrivacy = !this.enablePrivacy
			},
			toPage(route) {
				uni.navigateTo({
					url: route
				})
			},
			/**
			 * 登录前验证
			 */
			beforeLogin() {
				if (!this.enablePrivacy) {
					uni.showToast({
						title: "请同意用户隐私",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
			},
			handlePhone(e) {
				let self = this
				let phoneCode = e.detail.code;
				if (!e.detail.code) {
					uni.showToast({
						title: "请授予手机号码权限，手机号码会和系统用户绑定！",
						icon: "none",
					});
					return;
				}
				mpAutoLogin({
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					code: this.code,
				}).then((res) => {
					// 根据新的API返回格式设置token
					const { accessToken, refreshToken, user } = res.data.data;
					storage.setAccessToken(accessToken);
					storage.setRefreshToken(refreshToken);

					// 登录成功
					uni.showToast({
						title: "登录成功!",
						icon: "none",
					});
					storage.setUserInfo(user);
					storage.setHasLogin(true);
					if (user.isCommunityBound) {
						self.$router.navigateTo({
							url: '/pages/tabBar/home'
						})
					} else {
						self.$router.navigateTo({
							url: '/pages/index/index'
						})
					}
				});
			},
			closePage() {
				uni.navigateBack()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.card_box {
		padding: 24rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;

		.card_img {
			width: 100%;
			height: 220rpx;
		}

		.card_title {
			padding: 24rpx;
			font-weight: 700;
			text-align: center;
		}
	}

	.wx-auth-container {
		width: 100%;
		margin-top: 20%;
	}

	.logo-info {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;

		flex-direction: column;
		font-weight: bold;
	}

	image {
		width: 100px;
		height: 100px;
		text-align: center;
		-webkit-transform: scale(2.5);
		transform: scale(2.5);
	}

	.logo-info-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: none;
	}

	text.title,
	text.shop {
		display: inline-block;
		font-size: 60rpx;
		color: #333;
	}

	text.shop {
		display: inline-block;
		font-size: 55rpx;
		color: #333;
	}

	.box {
		margin: 0 32rpx;
	}

	/* 文字提示*/
	.small-tips {
		width: 94%;
		padding: 20rpx;
		font-size: 24rpx;
		margin: 0 0 20rpx;
		color: #999;
	}

	.auth-button {
		padding: 10px 20px;
		width: calc(100% - 20 * 4rpx);
	}

	.tips {
		margin-left: 20rpx;
		width: 80%;
		text-align: left;
		line-height: 1.75;
	}

	.register {
		// color: $weChat-color !important;
		border: none !important;
		background: #fff !important;
	}

	.btn-auth {
		width: 92%;
		margin: 0 auto 40rpx;
		border-radius: 100px;
		// animation: mymove 5s infinite;
		// -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
		// animation-direction: alternate; /*轮流反向播放动画。*/
		// animation-timing-function: ease-in-out; /*动画的速度曲线*/
		// /* Safari 和 Chrome */
		// -webkit-animation: mymove 5s infinite;
		// -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
		// -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	}

	.btn-callback {
		text-align: center;
		font-size: 30rpx;
		background: #ededed;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100px;
		width: 92%;
		margin: 0 auto;
	}

	.btn-callback {
		text-align: center;
		font-size: 30rpx;
		background: #ededed;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100px;
		width: 92%;
		margin: 0 auto;
	}

	.btns {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}

	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}

	.tips {
		font-size: 12px;
		line-height: 20px;
		margin-top: 0rpx;
		width: 546rpx;
		margin-left: 10rpx;

		>span {
			color: orange;
		}
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.privacy {
		margin-top: 150rpx;
		justify-content: center;
	}
</style>